import axios from "axios";
import React, { useState } from "react";
import { Upload, Button } from 'antd'
import { UploadChangeParam, UploadFile } from "antd/es/upload";

const App: React.FC = () => {
  const [url, setUrl] = useState('')
  const onChange = (e: UploadChangeParam<UploadFile<any>>) => {
    if(e.file.response) {
        setUrl(e.file.response.data.url)
    }
  }

  return (
    <div>
      <Upload action="/api/upload" method="post" name="file" onChange={e => onChange(e)}>
        <Button>上传文件</Button>
      </Upload>
      <img src={url} alt="" height={400}/>
    </div>
  );
};

export default App;

/************************/

// File： 文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。
// Blob: Blob 对象表示一个不可变、原始数据的类文件对象。
